<template>
  <div class="rank">
    <p class="rank_title">热门景区排行</p>
    <p><img src="../../../images/dataScreen-title.png" alt=""></p>
    <div class="charts_title">
      <span class="title_left">排名</span>
      <span class="title_center">景区</span>
      <span class="title_right">预约数量</span>
    </div>
    <div class="rank_charts" ref="charts"></div>
  </div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue';
let charts = ref()
onMounted(() => {
  let mycharts = echarts.init(charts.value)
  mycharts.setOption({
    // backgroundColor: '#181e36',
    grid: {
      left: 120,
      right: 80,
      top: 0,
      bottom: 110
    },
    xAxis: {
      show: false,
      max: 100
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: ['峨眉山', '希腊雅丁', '九寨沟', '万里长城', '北京故宫'],
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          margin: 5
        },
        axisLine: { show: false },
        axisTick: { show: false }
      },
      {
        type: 'category',
        inverse: true,
        data: ['8.00w', '6.00w', '5.00w', '4.00w', '3.00w'],
        axisLabel: {
          color: '#fff',
          fontSize: 14,
          margin: 5
        },
        axisLine: { show: false },
        axisTick: { show: false }
      }
    ],
    series: [
      // 进度条
      {
        type: 'bar',
        data: [80, 60, 50, 40, 30],
        barWidth: 15,
        itemStyle: {
          color: function (params: any) {
            const colorList = [
              '#2db7f5', // NO.1 蓝色
              '#f97c7c', // NO.2 粉色
              '#6ec6ff', // NO.3 浅蓝
              '#ffd700', // NO.4 金色
              '#b39ddb'  // NO.5 紫色
            ];
            return colorList[params.dataIndex];
          },
          borderRadius: 10
        },
        label: {
          show: true,
          position: 'insideRight',
          formatter: '{c}%',
          color: '#fff',
          fontSize: 14
        },
        z: 2
      },
      // 背景条
      {
        type: 'bar',
        data: [100, 100, 100, 100, 100],
        barWidth: 15,
        itemStyle: {
          color: 'rgba(255,255,255,0.1)',
          borderRadius: 10
        },
        barGap: '-100%',
        z: 1
      },
      // 排名
      {
        type: 'custom',
        renderItem: function (params: any, api: any) {
          const y = api.coord([0, params.dataIndex])[1];
          const rank = params.dataIndex + 1;
          const colorList = [
            '#ff5b5b', // NO.1 红色
            '#ffb84d', // NO.2 橙色
            '#4db3ff', // NO.3 蓝色
            '#ffd700', // NO.4 金色
            '#b39ddb'  // NO.5 紫色
          ];
          return {
            type: 'text',
            style: {
              text: 'NO.' + rank,
              x: 1,
              y: y - 1,
              textAlign: 'left',
              textVerticalAlign: 'middle',
              font: 'bold 16px Arial',
              fill: colorList[params.dataIndex]
            }
          };
        },
        data: [0, 0, 0, 0, 0],
        yAxisIndex: 0,
        z: 3
      }
    ]
  })
})
</script>

<style scoped>
.rank {
  margin: 15px 15px;
  width: 420px;
  height: 350px;
  background: url(../../../images/dataScreen-main-rb.png) no-repeat;
  background-size: 100% 100%;

  .rank_title {
    color: white;
    font-size: 20px;

  }

  .charts_title {
    margin-top: 45px;
    margin-left: 10px;
    width: 400px;
    background: url(../../../images/rankingChart-bg.png) no-repeat;
    background-size: 100% 100%;
    color: orange;
    font-size: 16px;
    line-height: 40px;
    display: flex;

    .title_right {
      flex: 3;
      margin-right: 35px;
    }

    .title_center {
      flex: 2;
      margin-left: 10px;

    }

    .title_left {
      flex: 1;
      margin-left: 10px;
    }
  }

  .rank_charts {
    height: 350px;
    margin: 0 20px;
  }
}
</style>